<template>
  <div p-5>
    <a-tabs class="all-tabs" v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="在用设备">
        <DynamicTable
          bordered
          :data-request="loadData"
          :columns="columns"
          row-key="id"
          @resize-column="handleResizeColumn"
          :scroll="{
            y: 'calc(100vh - 380px)',
          }"
          :row-selection="rowSelection"
          show-index
        >
          <template #toolbar>
            <a-button type="primary" @click="openUserModal({})"> 新增设备 </a-button>
            <a-button @click="openUserModal({})"> 批量导入设备 </a-button>
          </template>
        </DynamicTable>
      </a-tab-pane>
      <a-tab-pane key="2" tab="停用设备" force-render>
        <DynamicTable
          bordered
          :data-request="loadData2"
          :columns="columns2"
          row-key="id"
          @resize-column="handleResizeColumn"
          :scroll="{
            y: 'calc(100vh - 380px)',
          }"
          :row-selection="rowSelection"
          show-index
        >
        </DynamicTable>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup lang="ts">
  import { baseColumns, baseColumns2, type TableListItem } from './columns';
  import { ref, reactive } from 'vue';
  import {
    useTable,
    type OnChangeCallbackParams,
    type TableColumn,
  } from '@/components/core/dynamic-table';
  import type { TableRowSelection } from 'ant-design-vue/es/table/interface';
  const activeKey = ref('1');

  const [DynamicTable] = useTable();
  const selectedFileList = ref<API.File[]>([]);
  const columns: TableColumn[] = [
    ...baseColumns,
    {
      title: '操作',
      align: 'left',
      width: 220,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          label: '设备详情',
          onClick: () => console.log('111'),
        },
        {
          label: '编辑',
          onClick: () => console.log('111'),
        },
        {
          label: '停用',
          onClick: () => console.log('111'),
        },
        {
          label: '删除',
          onClick: () => console.log('111'),
        },
      ],
    },
  ];

  const columns2: TableColumn[] = [
    ...baseColumns2,
    {
      title: '操作',
      align: 'left',
      width: 180,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          label: '设备详情',
          onClick: () => console.log('111'),
        },
        {
          label: '编辑',
          onClick: () => console.log('111'),
        },
        {
          label: '删除',
          onClick: () => console.log('111'),
        },
      ],
    },
  ];
  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = {
      current: 1,
      orders: [],
      pages: 1,
      records: [
        {
          id: '1',
          userNum: 'DZ-CJA-001',
          userLogin: '恒温恒湿培养箱',
          type: '1',
          userName: '监测设备',
          action: 'SSCK20',
          operationTime: '检测部',
        },
        {
          id: '2',
          userNum: 'DZ-CJA-001',
          userLogin: '恒温恒湿培养箱',
          type: '2',
          userName: '监测设备',
          action: 'SSCK20',
          operationTime: '检测部',
        },
        {
          id: '3',
          userNum: 'DZ-CJA-001',
          userLogin: '高效液相色谱仪 (HPLC)',
          type: '2',
          userName: '分析仪器',
          action: 'SSCK20',
          operationTime: '检测部',
        },
        {
          id: '4',
          userNum: 'DZ-CJA-001',
          userLogin: '高效液相色谱仪 (HPLC)',
          type: '2',
          userName: '分析仪器',
          action: 'SSCK20',
          operationTime: '检测部',
        },
      ],

      searchCount: true,
      size: 10,
      total: 4,
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  const loadData2 = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = {
      current: 1,
      orders: [],
      pages: 1,
      records: [
        {
          id: '1',
          userNum: 'DZ-CJA-001',
          userLogin: '切削机床GSR980',
          type: '5',
          userName: '金属切削机床',
          action: 'SSCK20',
          operationTime: '检测部',
        },
        {
          id: '2',
          userNum: 'DZ-CJA-001',
          userLogin: '切削机床GSR980',
          type: '5',
          userName: '金属切削机床',
          action: 'SSCK20',
          operationTime: '检测部',
        },
        {
          id: '3',
          userNum: 'DZ-CJA-001',
          userLogin: '切削机床GSR980',
          type: '5',
          userName: '金属切削机床',
          action: 'SSCK20',
          operationTime: '检测部',
        },
      ],
      searchCount: true,
      size: 10,
      total: 3,
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  /**
   * @description 打开用户弹窗
   */
  const openUserModal = async (record: Partial<TableListItem> = {}) => {};
  const handleResizeColumn = (w, col) => {
    col.width = w;
  };
  const rowSelection = reactive<TableRowSelection<API.NetdiskManageListItem>>({
    selectedRowKeys: [],
    onChange: (selectedRowKeys: Key[], selectedRows) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      rowSelection.selectedRowKeys = selectedRowKeys;
      selectedFileList.value = selectedRows.map((n) => ({ type: n.type, name: n.name }));
    },
  });
</script>
<style lang="less" scoped></style>
